<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: CSS box-shadows without images</title>
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/x-icon" href="http://flyxiang.org/www/img/favicon.ico">
    <link rel="apple-touch-icon" href="http://flyxiang.org/www/img/flyxiang_57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="http://flyxiang.org/www/img/flyxiang_72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="http://flyxiang.org/www/img/flyxiang_114.png">
    <link href="../www/css/basic.css" rel="stylesheet" media="all" >

    <style>
        body {
            font:14px/1.5 'Open Sans',sans-serif;
            color:#333;
            background:#EDEDED;
            -webkit-text-size-adjust: none;
        }
        /*Custom text-selection colors*/
        ::-moz-selection {background: #F04530; color: #fff; text-shadow: none;}
        ::selection {background: #F04530; color: #fff; text-shadow: none;} 
        a {
            color:#346AA8;
            text-decoration:none;
        }

        a:hover,
        a:focus,
        a:active {
            text-decoration:none;
        }
        h1 {
            text-align: center;
            font-family: 'Oswald',sans-serif;
        }
        h1 a {
            font-size: 30px;
            font-weight: 400;
            text-decoration: none;
            color: #5FA4A0
        }
        h1 a:hover {
            color: #5FA4A0
        }

        
        .container {
            position:relative;
            z-index:1;
            width:600px;
            padding:20px;
            margin:0 auto;
            background:#EDEDED;
        }


        .container:after {
            content:"";
            display:block;
            clear:both;
            visibility:hidden;
            height:0;
            font-size:0;
        }
        .inner {
            width: 610px;
        }

        /* Shared styles */

        .box-shadows {
            position:relative;
            float:left;
            width:40%;
            padding:1em;
            margin:2em 10px;
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        .box-shadows:before,
        .box-shadows:after {
            content:"";
            position:absolute;
            z-index:-2;
        }

        .box-shadows p {
            font-size:16px;
        }

        /* Lifted corners */

        .lifted {
            -moz-border-radius:4px;
                 border-radius:4px;
        }

        .lifted:before,
        .lifted:after {
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            max-height:100px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }

        .lifted:after {
            right:10px;
            left:auto;
            -webkit-transform:rotate(3deg);
               -moz-transform:rotate(3deg);
                -ms-transform:rotate(3deg);
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }

        /* Curled corners */

        .curled {
            border:1px solid #efefef;
            -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
                 border-radius:0 0 120px 120px / 0 0 6px 6px;
        }

        .curled:before,
        .curled:after {
            bottom:12px;
            left:10px;
            width:50%;
            height:55%;
            max-width:200px;
            max-height:100px;
            -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
               -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
                    box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
            -webkit-transform:skew(-8deg) rotate(-3deg);
               -moz-transform:skew(-8deg) rotate(-3deg);
                -ms-transform:skew(-8deg) rotate(-3deg);
                 -o-transform:skew(-8deg) rotate(-3deg);
                    transform:skew(-8deg) rotate(-3deg);
        }

        .curled:after {
            right:10px;
            left:auto;
            -webkit-transform:skew(8deg) rotate(3deg);
               -moz-transform:skew(8deg) rotate(3deg);
                -ms-transform:skew(8deg) rotate(3deg);
                 -o-transform:skew(8deg) rotate(3deg);
                    transform:skew(8deg) rotate(3deg);
        }

        /* Perspective */

        .perspective:before {
            left:80px;
            bottom:5px;
            width:50%;
            height:35%;
            max-width:200px;
            max-height:50px;
            -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
               -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
                    box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
            -webkit-transform:skew(50deg);
               -moz-transform:skew(50deg);
                -ms-transform:skew(50deg);
                 -o-transform:skew(50deg);
                    transform:skew(50deg);
            -webkit-transform-origin:0 100%;
               -moz-transform-origin:0 100%;
                -ms-transform-origin:0 100%;
                 -o-transform-origin:0 100%;
                    transform-origin:0 100%;
        }

        .perspective:after {
            display:none;
        }

        /* Raised shadow - no pseudo-elements needed */

        .raised {
            -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        /* Curved shadows */

        .curved:before {
            top:10px;
            bottom:10px;
            left:0;
            right:50%;
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
            -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
            -moz-border-radius:10px / 100px;
            border-radius:10px / 100px;
        }

        .curved-vt-2:before {
            right:0;
        }

        .curved-hz-1:before {
            top:50%;
            bottom:0;
            left:10px;
            right:10px;
            -moz-border-radius:100px / 10px;
            border-radius:100px / 10px;
        }

        .curved-hz-2:before {
            top:0;
            bottom:0;
            left:10px;
            right:10px;
            -moz-border-radius:100px / 10px;
            border-radius:100px / 10px;
        }

        /* Rotated box */

        .rotated {
            -webkit-box-shadow:none;
               -moz-box-shadow:none;
                    box-shadow:none;
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }

        .rotated > :first-child:before {
            content:"";
            position:absolute;
            z-index:-1;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
        footer {
            padding: 0 2em;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">
        <h1><a href="http://www.flyxiang.org">CSS box-shadows without images</a></h1>

        <div class="box-shadows lifted">
            <p>转角翘起</p>
        </div>

        <div class="box-shadows curled">
            <p>转角卷曲</p>
        </div>

        <div class="box-shadows perspective">
            <p>透视</p>
        </div>

        <div class="box-shadows raised">
            <p>上凸盒</p>
        </div>

        <div class="box-shadows curved curved-vt-1">
            <p>单一的垂直曲线</p>
        </div>

        <div class="box-shadows curved curved-vt-2">
            <p>竖曲线</p>
        </div>

        <div class="box-shadows curved curved-hz-1">
            <p>单一的水平曲线</p>
        </div>

        <div class="box-shadows curved curved-hz-2">
            <p>水平曲线</p>
        </div>

        <div class="box-shadows lifted rotated">
            <p>旋转盒</p>
        </div>
        </div>
    </div>
<footer>&copy;<a href="http://flyxiang.org">flyxiang.org</a></footer>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28937623-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>
